import React from 'react'
import {
    Button,
    message,
    Modal
} from 'antd'
import Table from '../../../components/Table'
import { FormModal } from '../../../components/ModalForm'
import {  MessageType } from '../../../utils/system-data'
import 'whatwg-fetch'
import API from '../../../axios/api'
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();

const confirm = Modal.confirm
const columns = [
    { dataIndex: 'RudderName', title: '分舵名称', width: 200,},
    { dataIndex: 'AppTemplateTypeString', title: '模板类型', width: 200,},
    { dataIndex: 'Title', title: '模板标题', width: 200,},

]
@withRouter @inject('appStore') @observer
class MessageTemp extends React.Component {

    constructor(props) {
        super(props)
        const {user, rudder, rudderList} = props.appStore
        this.state = {
            user: user,
            rudder: rudder,
            rudderList: rudderList,
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            modalShowSetPerm: false,
            Page: 1,
            Pages:1,
        }
    }
    componentWillReceiveProps(nextProps){
        const {user, rudder, rudderList} = this.props.appStore
         this.setState({
             user: user,
             rudder: rudder,
             rudderList: rudderList,
         })
     }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async () => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
        }
        await API.fetchMessageTemplatePages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }

    componentWillMount() {
        this.fetchTableData()
    }

    add=() =>{
        this.setState({
            modalShow: true
        })
    }

    onOk = (param) =>{
        API.addMessageTemplate(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    onCancel = () =>{
        this.setState({
            modalShow: false
        })
    }

    tableAction = async (actionKey, item) => {
        if (actionKey === 'edit') {
            this.setState({
                item: item,
                modalShowEdit: true
            })
        }
    }

    handerDel(item){
        return API.deleteMessageTemplate({Id: item.Id})
    }

    fields = () => {
        return [{
            label: '模板标题',
            type: 'input',
            name: 'Title',
            options: {
                rules: [{
                    required: true,
                    message: '模板标题必填!',
                }]
            }
        },{
            label: '模板库',
            type: 'input',
            name: 'WeChatTemplateId',
            options: {
                rules: [{
                    required: true,
                    message: '必填!',
                }]
            }
        },{
            label: '模板',
            type: 'input',
            name: 'TemplateId',
            options: {
                rules: [{
                    required: true,
                    message: '必填!',
                }]
            }
        },{
            label: '模板类型',
            type: 'select',
            name: 'AppTemplateType',
            items: () => MessageType,
            options: {
                rules: [{
                    required: true,
                    message: '必选!',
                }]
            }
        },
            {
                label: '分舵',
                type: 'select',
                name: 'RudderId',
                items: () => this.state.rudderList,
                options: {
                    rules: [{
                        required: true,
                        message: '必选!',
                    }]
                }
            },]
    }

    fieldsEdit = () => {
        const item = this.state.item
        return [{
            label: '模板标题',
            type: 'input',
            name: 'RoleName',
            items: item.RoleName,
            options: {
                rules: [{
                    required: true,
                    message: '模板标题必填!',
                }]
            }
        }, {
            label: '角色描述',
            type: 'input',
            name: 'RoleDescribe',
            items: item.RoleDescribe,
            options: {
                initialValue: item.RoleDescribe,
            }
        },]
    }

    render() {
        return (
            <div id="wrap">
                <div style={{ paddingTop: 10 }}>
                    <Button type="primary" onClick={this.add} >添加</Button>
                </div>
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            scroll={{y: 385 }}

                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                    <FormModal
                        modalKey="add"
                        visible={this.state.modalShow}
                        title="添加"
                        fields={this.fields()}
                        onOk={this.onOk}
                        onCancel={this.onCancel}
                        okText="保存"
                    />
                </div>
            </div>
        )
    }
}
export default MessageTemp
